<template>
  <div>
      <div class="head_head_2a_sj">
        <el-carousel height="604px" trigger="click">
          <el-carousel-item v-for="item in slideshow" :key="item.id">
            <img :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="24">
            <h3>【商城优势】</h3>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <img src="/images/si1.png" alt="" />
              <span>以旧换新</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <img src="/images/si2.png" alt="" />
              <span>以旧换新</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <img src="/images/si3.png" alt="" />
              <span>以旧换新</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <img src="/images/si4.png" alt="" />
              <span>以旧换新</span>
            </div>
          </el-col>
          <el-col :span="24">
            <h4>*以上权益仅限部分商品可享</h4>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slideshow: [
        {
          id: "1",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/e96305af50e74ae2bd5a3b2fda31ed4b.jpg",
        },
        {
          id: "2",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/f88ead13b2b24460a8ef6f2de2896cf7.jpg"
        },
        {
          id: "3",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/4d7b646037d84b048c985f57d0eb0ec7.jpg",
        },
        {
          id: "4",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/f9ede35eea0f4648a2f61733657a6ab5.jpg"
        },
        {
          id: "5",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/85758772e37a4830959de3b5d470c734.jpg",
        },
        {
          id: "6",
          imgUrl: "https://image.samsungeshop.com.cn/goods/20211013/b9048b64335b499697d342ff9da6bf78.jpg",
        },
      ],
    };
  },
};
</script>


<style lang="less" scoped>
.el-carousel__item img {
  height: 550px;
}
.el-carousel {
  width: 550px;
  background-color: #fff;
  /deep/ .el-carousel__indicators {
    // 指示器
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0px 15px;
  }
  // 使用关键字 /deep/，表示改变 element-ui 组件深层次样式；
  /deep/ .el-carousel__button {
    // 指示器按钮
    width: 7px;
    height: 7px;
    border: none;
    border-radius: 50%;
    background-color: #8a94d0;
  }
  /deep/.el-carousel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a94d0;
    margin: 0 5px;
    padding: 0;
  }
  /deep/ .is-active .el-carousel__button {
    // 指示器激活按钮
    width: 10px;
    height: 10px;
    background: #1428a0;
  }
}
.el-row {
  margin-top: 30px;
  width: 550px;
  background-color: #f7f7f7;
  .el-col {
    h3 {
      margin-top: 10px;
      font-size: 16px;
      line-height: 24px;
      padding-left: 30px;
      margin-bottom: 20px;
    }
    h4 {
      margin-top: 10px;
      font-size: 16px;
      line-height: 24px;
      padding-left: 30px;
    }
    div {
      width: 137.5px;
      height: 94px;
      img {
        width: 63px;
        height: 63px;
        display: block;
        margin: 0 auto;
      }
      span {
        display: block;
        margin: 0 auto;
        text-align: center;
      }
    }
  }
  .head-two-left {
    height: 845px;
    width: 550px;
    position: sticky;
    top: 10px;
    box-sizing: border-box;
    //   overflow: hidden;
    z-index: 6;
    margin-bottom: 0px;
    /* 左侧手机轮播 */
    .head-two-left-top {
      width: 550px;
      height: 635px;
      /* background: blue; */
      position: relative;
    }
  }
  .button-paimary1 {
    padding: 5px 10px !important;
  }
}
</style>